<script lang="ts" setup name="RefillRuleEdit">
import { Plus } from '@element-plus/icons-vue'
import { FormInstance } from 'element-plus'
import { Member } from '~/src/api/interface/member'
import { createRefillRuleAPI, editRefillRuleAPI, getMemberGradeAPI } from '~/src/api/member'
import { useHandleDetail } from '~/src/hooks/useHandleData'
import { useTableRowStore } from '~/src/store/modules/useTableRowStore'

const route = useRoute()
const activeName = ref(1)
const { currentRow } = useTableRowStore() // 跳转携带参数
const ruleFormRef = ref<FormInstance>()
const handleDetail = useHandleDetail()

onMounted(async () => {
  await getMemberList()
  dialogProps.value.row = currentRow as Partial<Member.RefillRule>
  dialogProps.value.row.userGradeObject = dialogProps.value.row.userGradeObject ? dialogProps.value.row.userGradeObject : []
})

const rules = reactive({
  name: [{ required: true, message: '会员名称必填' }],
  depositMoney: [{ required: true, message: '请输入充值金额' }],
  couponCount: [
    {
      validator: (rules: any, value: any, callBack: any) => {
        if (dialogProps.value.row.couponId && !value) {
          return callBack(new Error('请输入礼券数量'))
        }
        callBack()
      },
    },
  ],
  'row.userGradeObject': [
    {
      validator: (rules: any, value: any[], callBack: any) => {
        if (dialogProps.value.row.userGradeObject.length < 1) {
          return callBack(new Error('至少选择一项'))
        }
        callBack()
      },
    },
  ],
})

const dialogProps = ref<{ row: Partial<Member.RefillRule> }>({
  row: {},
})

const memberList = ref<Partial<Member.MemberGrade>[]>([])
const getMemberList = () => {
  getMemberGradeAPI({ pageSize: 9999, pageNum: 1 }).then((res) => {
    memberList.value = res.data.list
    memberList.value.unshift({ title: '非会员', id: 0 })
  })
}

const onSubmit = async () => {
  await ruleFormRef.value?.validate()
  handleDetail.useChangeDetailData(
    dialogProps.value.row.id ? editRefillRuleAPI : createRefillRuleAPI,
    dialogProps.value.row,
    '/member/refillRule'
  )
}

// 打开礼券start😢后面完善
const couponList = ref<any[]>([])
// const couponRef = ref<InstanceType<typeof CouponDialog> | null>(null)
</script>

<template>
  <div class="auto-height-container flx-column">
    <header-line :title="(dialogProps.row.id ? '编辑' : '新增') + '充值规则'" @on-submit="onSubmit()" />
    <el-form ref="ruleFormRef" class="flex1" label-suffix=" :" label-width="140px" :model="dialogProps.row" :rules="rules">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="基本信息" :name="1" style="height: 100%; overflow-y: auto">
          <el-col :span="12">
            <el-form-item label="充值活动名称" prop="name">
              <el-input v-model="dialogProps.row!.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="充值类型" prop="depositType">
              <el-radio-group v-model="dialogProps.row!.depositType">
                <el-radio :label="1">充值金额</el-radio>
                <!-- <el-radio :label="2">充次数</el-radio> -->
              </el-radio-group>
            </el-form-item>
            <template v-if="dialogProps.row.depositType === 1">
              <el-form-item class="w100" label="充值金额" prop="depositMoney">
                <input-number-float v-model="dialogProps.row!.depositMoney" v-selectAll :controls="false" :min="0" />
              </el-form-item>
              <el-form-item label="赠送金额" prop="giveMoney">
                <input-number-float v-model="dialogProps.row!.giveMoney" v-selectAll class="w100" :controls="false" />
              </el-form-item>
            </template>
            <!-- <template v-if="dialogProps.row.depositType === 2">
                  <el-form-item
                    label="充值次数"
                    prop="parValue"
                    :rules="dialogProps.row.depositType === 2 ? [{ required: true, message: '请输入' }] : [{ required: false }]"
                  >
                    <input-number-float v-selectAll class="w100" v-model="dialogProps.row!.parValue" :controls="false" />
                  </el-form-item>
                  <el-form-item label="赠送次数" prop="parValue">
                    <input-number-float v-selectAll class="w100" v-model="dialogProps.row!.giftValue" :controls="false" />
                  </el-form-item>
                </template> -->
            <el-form-item label="赠送积分" prop="giveIntegral">
              <input-number-float v-model="dialogProps.row!.giveIntegral" v-selectAll class="w100" :controls="false" />
            </el-form-item>
            <el-form-item label="上级赠送积分" prop="upGiveIntegral">
              <input-number-float v-model="dialogProps.row!.upGiveIntegral" v-selectAll class="w100" :controls="false" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="dialogProps.row!.remark" placeholder="请填写" />
            </el-form-item>

            <!-- <el-form-item label="限制参与会员分类" prop="userCategoryId">
                  <el-select class="w100" v-model="dialogProps.row!.userCategoryId" placeholder="请选择" clearable>
                    <el-option v-for="item in optionsCategory" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item> -->

            <el-form-item label="可参与会员等级" prop="row.userGradeObject">
              <el-checkbox-group v-model="dialogProps.row!.userGradeObject">
                <el-checkbox v-for="item in memberList" :key="item.id" :label="item.title" :value="item.id" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="状态" prop="depositRuleStatus">
              <el-radio-group v-model="dialogProps.row!.depositRuleStatus">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="2">停用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否累加" prop="isAccumulation">
              <el-radio-group v-model="dialogProps.row!.isAccumulation">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <!--  <el-form-item label="赠送礼券" prop="couponId">
              <div v-if="false" style="display: flex; align-items: center; color: #efb43f" @click="addCoupon()">
                添加优惠券<el-icon style="margin-left: 5px" size="18" color="#efb43f"><CirclePlus /></el-icon>
              </div>

              <div class="tag-box" v-else>
                <div class="tag-content">
                  <el-tag type="primary" style="margin-right: 5px" closable v-for="item in 19" :key="item">Tag 1</el-tag>
                </div>
                <el-icon @click="addCoupon(true, couponList)" color="#efb43f" size="25" style="margin-left: 5px">
                  <CirclePlus />
                </el-icon>
              </div>

               <el-select class="w100" v-model="dialogProps.row!.couponId" placeholder="请选择" clearable>
                <el-option v-11for="item in optionsCoupon" :key="item.id" :label="item.name" :value="item.id" />
              </el-select> -->

            <!-- <el-input v-model="dialogProps.row!.couponId" disabled>
                <template #prepend>
                  <el-button type="primary" :icon="MoreFilled" @click="addGift"></el-button>
                </template>
              </el-input>
            </el-form-item> -->

            <el-form-item label="绑定会员等级" prop="grade">
              <el-select v-model="dialogProps.row!.grade" class="w100" clearable placeholder="请选择">
                <el-option v-for="item in memberList.slice(1)" :key="item.id" :label="item.title" :value="item.id" />
              </el-select>
              <div style="color: #999999">用户充值该活动自动升级为该等级会员</div>
            </el-form-item>
            <!-- <el-form-item> </el-form-item> -->

            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker v-model="dialogProps.row!.startTime" class="w100" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker v-model="dialogProps.row!.endTime" class="w100" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
            </el-form-item>

            <!-- <el-form-item label="礼券数量" prop="couponCount">
              <input-number-float v-selectAll class="w100" v-model="dialogProps.row!.couponCount" :controls="false" />
            </el-form-item> -->

            <!-- 以后做了营销活动在做😢 -->
            <!-- <el-form-item label="赠送礼券" prop="couponId">
              <div v-if="couponList.length < 1" class="flx-default" style="color: var(--el-color-primary)" @click="addCoupon(false)">
                添加优惠券
                <el-icon class="ml5" size="18"><circle-plus /></el-icon>
              </div>

              <div v-else class="tag-box">
                <div class="table">
                  <el-table border class="width100" :data="couponList">
                    <el-table-column label="礼券名字" prop="name" width="120" />
                    <el-table-column label="券数量" prop="count" width="120">
                      <template #default="{ row, $index }">
                        <input-number-float v-selectAll v-model="row.count" class="w80" :controls="false" :min="1" @change="changeCount($index, row)" />
                      </template>
                    </el-table-column>
                    <el-table-column label="券类型" prop="typeName" width="100" />
                    <el-table-column label="有效期" prop="validityDesc" />
                    <el-table-column fixed="right" label="操作" width="100">
                      <template #default="{ $index }">
                        <el-button type="text" @click="onDel($index)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-icon class="ml5" color="#efb43f" size="25" @click="addCoupon(true)">
                  <circle-plus />
                </el-icon>
              </div>
            </el-form-item> -->
            <!-- 以后做了营销活动在做😢 -->
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="其他信息" :name="2" style="overflow-y: auto; height: 100%">
          <el-col :span="15">
            <el-form-item label="广告图" prop="image">
              <upload-img v-model:image-url="dialogProps.row.image">
                <template #empty>
                  <!-- <el-icon><picture-filled /></el-icon> -->
                  <el-icon><plus /></el-icon>
                </template>
              </upload-img>
            </el-form-item>
            <div class="ml140" style="color: #999999">建议上传图片：3 : 2 （例：宽375px 高250px）</div>
            <el-form-item />
            <el-form-item label="活动说明">
              <wang-editor v-model:value="dialogProps.row!.introduce" height="330px" />
              <div style="color: #999999">活动说明：上传图片后建议点击图片 100% 进行适配</div>
            </el-form-item>
            <el-form-item>
              <div class="ml20 mt10">
                <div>
                  <el-text size="small" type="info">
                    提示1:充值金额和赠送金额都为0时,前台可输入赠送金额；赠送次数为-1,前台可输入赠送次数
                  </el-text>
                </div>
                <div class="mt5">
                  <el-text size="small" type="info">
                    提示2:充值金额和赠送金额都为0时,赠送积分为每元赠送多少积分，次卡的积分赠送在次卡方案设置
                  </el-text>
                </div>
                <div class="mt5">
                  <el-text size="small" type="info">提示3:不选择会员分类时,所有会员都适用该规则</el-text>
                </div>
              </div>
            </el-form-item>

            <!-- h-[calc(100vh-60px)] h-100px h-[calc(100vh - 800px)]  w="16" h="10" bg="blue-200"-->
            <!-- <div class="flex justify-center items-center p-5 ml120">
              <div class="bg-gray-100 w-[50%] h-[200px] mr-10"></div>
              <div class="bg-#f3c45d w-[50%] h-[200px]"></div>
            </div> -->
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<style lang="scss" scoped></style>
